<template>
  <div class="signal-strength" :style="{'clip-path': `polygon(${clipPathPolygon})`,backgroundImage: `linear-gradient(to right, hsl(${progress}deg 95.79% 45%) ${progress}%, #838383 ${progress}%)`}" />
</template>

<script lang="ts" setup>

import { onMounted } from 'vue'
import { NumberUtil } from '@utils/object-util'

const props = withDefaults(defineProps<{
  value: number,
  interval: number,
  cellNumber: number,
  stepMode: 'cell' | 'progress'
}>(), {
  value: 0,
  stepMode: 'cell',
  interval: 6.66,
  cellNumber: 4
})

onMounted(() => {
  loadClipPath()
})

const clipPathPolygon = ref('')
function loadClipPath () {
  const xStep = (100 - (props.interval * (props.cellNumber - 1))) / props.cellNumber
  const yStep = 100 / props.cellNumber
  let x = 0; let y = 100
  let polygon = ''
  for (let i = 0, len = props.cellNumber; i < len; i++) {
    polygon += `,${x}% 100%`
    y = NumberUtil.toFixed(y - yStep, 2)
    polygon += `,${x}% ${y}%`
    x = NumberUtil.toFixed(x + xStep, 2)
    polygon += `,${x}% ${y}%,${x}% 100%`
    if (i < len - 1) {
      x = NumberUtil.toFixed(x + props.interval, 2)
      polygon += `,${x}% 100%`
    }
  }
  clipPathPolygon.value = polygon.substring(1, polygon.length)
}

const progress = computed(() => {
  const ratio = 100 / props.cellNumber
  const value = props.stepMode === 'cell' ? Math.ceil(props.value / ratio) * ratio : props.value
  return value > 100 ? 100 : value < 0 ? 0 : value
})
</script>

<style lang="scss" scoped>
.signal-strength {
  --yk-signal-strength-size: 124px;
  width: var(--yk-signal-strength-size);
  height: var(--yk-signal-strength-size);
  //clip-path: polygon(
  //                0 100%, 0 75%, 20% 75%, 20% 100%, 26.66% 100%,
  //                26.66% 50%,46.66% 50%, 46.66% 100%, 53.32% 100%,
  //                53.32% 25%, 73.32% 25%, 73.32% 100%, 80% 100%,
  //                80% 25%, 80% 0, 100% 0, 100% 100%)
}
</style>
